<template>
  <div class="box">
    <AppSearchForm
      size="small"
      @submit="userMenuSearch()"
      @reset="userMenuReset()"
    >
      <el-form-item>
        <el-input
          v-model="userMenu.queryName"
          clearable
          placeholder="请输入用户名称及手机号"
          style="width: 200px"
        />
      </el-form-item>
    </AppSearchForm>
    <div class="btn-box">
      <el-button type="primary" @click="openUserMenu()"> 添加 </el-button>
      <el-button
        type="danger"
        @click="deleteUserMenu()"
        :loading="delBtnLoading"
      >
        删除
      </el-button>
    </div>

    <AppPageTable
      stripe
      size="small"
      :data="userMenu.tableData"
      :autostyle="'flex:1;'"
      :option="userMenu.tableOption"
      @change="getUserMenuList()"
    >
      <el-table-column type="selection" width="50px" />
      <el-table-column show-overflow-tooltip prop="nickName" label="用户名称" />
      <el-table-column show-overflow-tooltip prop="phone" label="手机号" />

      <!-- <el-table-column label="操作" width="90px" fixed="right">
        <template #default="scope">
          <el-popconfirm
            title="确定删除本条数据吗？"
            @confirm="deleteUserMenu(scope.row)"
          >
            <template #reference>
              <el-button link type="danger">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column> -->
    </AppPageTable>
    <el-dialog v-model="dialog.show" title="添加用户角色">
      <AppSearchForm size="small" @submit="userSearch()" @reset="userReset()">
        <el-form-item>
          <el-input
            v-model="dialog.query.name"
            clearable
            placeholder="请输入用户名称"
          />
        </el-form-item>
      </AppSearchForm>
      <AppPageTable
        stripe
        ref="dialogTable"
        size="small"
        :data="dialog.table.data"
        :autostyle="'height:100%'"
        :option="dialog.table.option"
        @change="getUserList()"
      >
        <el-table-column type="selection" width="50px" />
        <el-table-column
          show-overflow-tooltip
          prop="nickName"
          label="用户名称"
        />
        <el-table-column show-overflow-tooltip prop="phone" label="手机号" />
      </AppPageTable>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancelDialog" link>取消</el-button>
          <el-button
            type="primary"
            @click="submitDialog"
            :loading="dialog.btnLoading"
          >
            确认
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { defineComponent } from "vue";
import AppSearchForm from "@/components/AppSearchForm.vue";
import AppPageTable, { useTableOption } from "@/components/AppPageTable2";
export default defineComponent({
  components: { AppSearchForm, AppPageTable, AppSearchForm },
  props: {
    roleId: {
      type: [Number, String],
    },
  },
  data() {
    return {
      userMenu: {
        tableData: [],
        tableOption: useTableOption(),
        queryName: "",
      },
      dialog: {
        show: false,
        btnLoading: false,
        query: {
          name: "",
        },
        table: {
          data: [],
          option: useTableOption(),
        },
      },
      delBtnLoading: false,
    };
  },
  methods: {
    userMenuSearch() {
      this.userMenu.tableOption.page = 1;
      this.getUserMenuList();
    },
    userMenuReset() {
      this.userMenu.tableOption.page = 1;
      this.userMenu.queryName = "";
      this.getUserMenuList();
    },
    getUserMenuList() {
      this.userMenu.tableOption.loading = true;
      this.$http
        .get("/api/userRole/query", {
          KeyWords: this.userMenu.queryName,
          RoleId: this.roleId,
          PageIndex: this.userMenu.tableOption.page,
          PageSize: this.userMenu.tableOption.pageSize,
        })
        .then((res) => {
          this.userMenu.tableData = res.content;
          this.userMenu.tableOption.total = res.totalElements;
        })
        .finally(() => (this.userMenu.tableOption.loading = false));
    },
    deleteUserMenu() {
      if (this.userMenu.tableOption.selected.length != 0) {
        this.delBtnLoading = true;
        this.$http
          .post("/api/userRole/delUserRole", {
            roleId: this.roleId,
            userIdList: this.userMenu.tableOption.selected.map((t) => {
              return t.id;
            }),
          })
          .then((res) => {
            if (res.status) {
              this.$message.success(res.message);
              this.getUserList();
              this.dialog.show = false;
            } else {
              this.$message.error(res.message);
            }
          })
          .finally(() => (this.delBtnLoading = false));
      } else {
        this.$message.warning("请先选择数据");
      }
    },
    openUserMenu() {
      this.dialog.show = true;
      this.getUserList();
    },
    cancelDialog() {
      this.dialog.show = false;
    },
    submitDialog() {
      if (this.dialog.table.option.selected.length != 0) {
        this.dialog.btnLoading = true;
        this.$http
          .post("/api/userRole/addUserRole", {
            roleId: this.roleId,
            userIdList: this.dialog.table.option.selected.map((t) => {
              return t.id;
            }),
          })
          .then((res) => {
            if (res.status) {
              this.$message.success(res.message);
              this.getUserList();
              this.dialog.show = false;
            } else {
              this.$message.error(res.message);
            }
          })
          .finally(() => (this.dialog.btnLoading = false));
      } else {
        this.$message.warning("请先选择数据");
      }
    },
    getUserList() {
      this.dialog.table.option.loading = true;
      this.$http
        .get("/api/user/query", {
          KeyWords: this.dialog.query.name,
          PageIndex: this.dialog.table.option.page,
          PageSize: this.dialog.table.option.pageSize,
        })
        .then((res) => {
          this.dialog.table.data = res.content;
          this.$nextTick(() => {
            this.userMenu.tableData.forEach((item) => {
              let sameIndex = this.dialog.table.data.findIndex((t) => {
                return t.id == item.id;
              });
              if (sameIndex != -1) {
                this.$refs.dialogTable.$refs.tableRef.toggleRowSelection(
                  this.dialog.table.data[sameIndex],
                  true
                );
              }
            });
          });
          this.dialog.table.option.total = res.totalElements;
        })
        .finally(() => (this.dialog.table.option.loading = false));
    },
    userSearch() {
      this.dialog.table.option.page = 1;
      this.getUserList();
    },
    userReset() {
      this.dialog.table.option.page = 1;
      this.dialog.query.name = "";
      this.getUserList();
    },
  },
  watch: {
    roleId(newVal) {
      if (newVal) {
        this.getUserMenuList();
      }
    },
  },
  mounted() {},
});
</script>

<style lang="scss" scoped>
.box {
  height: 100%;
  display: flex;
  flex-direction: column;
  .btn-box {
    margin-bottom: 8px;
  }
}
</style>
